<template>
  <div class="color-list">
    <h1>目前主要用来调试色彩</h1>
    <h2>主色</h2>
    <div class="color-container">
      <span
        v-for="color in mainColors"
        @click="selectColor(color)"
        :style="{
          'background-color': color,
          color:
            color.startsWith('#f') || color.startsWith('#e') ? '#000' : '#fff',
        }"
        :key="color"
        >{{ color }}</span
      >
    </div>

    <h2>字体色</h2>
    <div class="color-container">
      <span
        v-for="color in textColors"
        @click="selectColor(color)"
        :style="{
          'background-color': color,
          color:
            color.startsWith('#f') || color.startsWith('#e') ? '#000' : '#fff',
        }"
        :key="color"
        >{{ color }}</span
      >
    </div>

    <h2>辅助色</h2>
    <div class="color-container">
      <span
        v-for="color in secondColors"
        @click="selectColor(color)"
        :style="{
          'background-color': color,
          color:
            color.startsWith('#f') || color.startsWith('#e') ? '#000' : '#fff',
        }"
        :key="color"
        >{{ color }}</span
      >
    </div>

    <h2>字体规范</h2>
    <div class="font-container" style="margin-bottom: 10px">
      <div v-for="font in fonts" :style="{ 'font-size': font }" :key="font">
        这是{{ font }}的文字
      </div>
    </div>

    <div style="width: 240px; height: 120px; background-color: pink" ref="root">
      点击外部内容测试
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useClickAway } from "@vant/use";

const mainColors = ref(["#ffd200", "#07b971", "#0d9166", "#01cb88"]);
const secondColors = ref([
  "#ffb62d",
  "#ff9e2d",
  "#ffb540",
  "#1e7be8",
  "#2076ff",
  "#ef5d4d",
  "#ff4946",
  "#06ba78",
  "#5c2223",
  "#eea2a4",
  "#5a191b",
  "#f07c82",
  "#5a1216",
  "#ed5a65",
  "#c04851",
  "#ee3f4d",
  "#c02c38",
  "#a7535a",
  "#e3b4b8",
  "#f0a1a8",
  "#f1939c",
  "#a61b29",
  "#894e54",
  "#c45a65",
  "#d11a2d",
  "#c21f30",
  "#de1c31",
  "#7c1823",
  "#541e24",
  "#4c1f24",
  "#82202b",
  "#82111f",
  "#ef475d",
  "#4d1018",
  "#ed556a",
  "#7a7374",
  "#f03752",
  "#e6d2d5",
  "#f0c9cf",
  "#ee2746",
  "#2b1216",
  "#ee4863",
  "#e77c8e",
  "#500a16",
  "#c27c88",
  "#73575c",
  "#ee4866",
  "#621624",
  "#ce5777",
  "#cc163a",
  "#f1c4cd",
  "#eeb8c3",
  "#856d72",
  "#2d0c13",
  "#36282b",
  "#bf3553",
  "#ec9bad",
  "#63071c",
  "#30161c",
  "#eea6b7",
  "#e9ccd3",
  "#eba0b3",
  "#4f383e",
  "#ed9db2",
  "#ec8aa4",
  "#ec7696",
  "#ea7293",
  "#ef82a0",
  "#ec2c64",
  "#eb507e",
  "#eb3c70",
  "#ea517f",
  "#de7897",
  "#b598a1",
  "#ed2f6a",
  "#c5708b",
  "#33141e",
  "#621d34",
  "#ef3473",
  "#382129",
  "#310f1b",
  "#381924",
  "#e16c96",
  "#951c48",
  "#62102e",
  "#e0c8d1",
  "#d13c74",
  "#4b1e2f",
  "#ec4e8a",
  "#de3f7c",
  "#a8456b",
  "#ce5e8a",
  "#461629",
  "#ee2c79",
  "#ef498b",
  "#ede3e7",
  "#ec2d7a",
  "#482936",
  "#440e25",
  "#d2568c",
  "#e9d7df",
  "#d2357d",
  "#36292f",
  "#d276a3",
  "#c06f98",
  "#cc5595",
  "#c35691",
  "#ba2f7b",
  "#9b1e64",
  "#5d3f51",
  "#4e2a40",
  "#bc84a8",
  "#c08eaf",
  "#411c35",
  "#ad6598",
  "#a35c8f",
  "#681752",
  "#894276",
  "#7e2065",
  "#8b2671",
  "#983680",
  "#c8adc4",
  "#1c0d1a",
  "#7e1671",
  "#1e131d",
  "#813c85",
  "#d1c2d3",
  "#3e3841",
  "#815c94",
  "#806d9e",
  "#e2e1e4",
  "#322f3b",
  "#8076a3",
  "#35333c",
  "#22202e",
  "#131124",
  "#302f4b",
  "#525288",
  "#2f2f35",
  "#ccccd6",
  "#74759b",
  "#1f2040",
  "#2e317c",
  "#a7a8bd",
  "#61649f",
  "#2d2e36",
  "#5e616d",
  "#47484c",
  "#0f1423",
  "#131824",
  "#475164",
  "#2b333e",
  "#1c2938",
  "#101f30",
  "#142334",
  "#15559a",
  "#0f59a4",
  "#1661ab",
  "#3170a7",
  "#346c9c",
  "#2775b6",
  "#2b73af",
  "#2474b5",
  "#4e7ca1",
  "#2376b7",
  "#144a74",
  "#93b5cf",
  "#2177b8",
  "#126bae",
  "#1772b4",
  "#baccd9",
  "#619ac3",
  "#495c69",
  "#8fb2c9",
  "#5698c3",
  "#11659a",
  "#2983bb",
  "#1677b3",
  "#c4cbcf",
  "#1177b0",
  "#2486b9",
  "#5e7987",
  "#74787a",
  "#cdd1d3",
  "#1781b5",
  "#66a9c9",
  "#d0dfe6",
  "#2f90b9",
  "#8abcd1",
  "#c3d7df",
  "#158bb8",
  "#d8e3e7",
  "#b2bbbe",
  "#1a94bc",
  "#5cb3cc",
  "#134857",
  "#132c33",
  "#21373d",
  "#b0d5df",
  "#22a2c3",
  "#474b4c",
  "#63bbd0",
  "#126e82",
  "#0f95b0",
  "#1491a8",
  "#c7d2d4",
  "#1e9eb3",
  "#3b818c",
  "#0eb0c9",
  "#29b7cb",
  "#51c4d3",
  "#7cabb1",
  "#10aec2",
  "#648e93",
  "#93d5dc",
  "#617172",
  "#c6e6e8",
  "#869d9d",
  "#57c3c2",
  "#c4d7d6",
  "#12aa9c",
  "#737c7b",
  "#12a182",
  "#1ba784",
  "#428675",
  "#c0c4c3",
  "#248067",
  "#1a3b32",
  "#314a43",
  "#2c9678",
  "#223e36",
  "#497568",
  "#141e1b",
  "#69a794",
  "#2bae85",
  "#9abeaf",
  "#45b787",
  "#92b3a5",
  "#1f2623",
  "#83cbac",
  "#70887d",
  "#55bb8a",
  "#20a162",
  "#40a070",
  "#1a6840",
  "#61ac85",
  "#68b88e",
  "#a4cab6",
  "#3c9566",
  "#5dbe8a",
  "#207f4c",
  "#eef7f2",
  "#579572",
  "#b9dec9",
  "#229453",
  "#20894d",
  "#15231b",
  "#66c18c",
  "#a4aca7",
  "#8a988e",
  "#9eccab",
  "#83a78d",
  "#485b4d",
  "#5d655f",
  "#6e8b74",
  "#2b312c",
  "#c6dfc8",
  "#41b349",
  "#43b244",
  "#253d24",
  "#41ae3c",
  "#add5a2",
  "#5e665b",
  "#8cc269",
  "#5bae23",
  "#dfecd5",
  "#cad3c3",
  "#9fa39a",
  "#b2cf87",
  "#96c24e",
  "#f0f5e5",
  "#b7d07a",
  "#d0deaa",
  "#373834",
  "#bacf65",
  "#e2e7bf",
  "#bec936",
  "#d2d97a",
  "#e2d849",
  "#fffef8",
  "#5e5314",
  "#fffef9",
  "#ad9e5f",
  "#fed71a",
  "#f9f4dc",
  "#e4bf11",
  "#d2b116",
  "#fbda41",
  "#eed045",
  "#f1ca17",
  "#d2b42c",
  "#f2ce2b",
  "#e2c027",
  "#645822",
  "#fcd217",
  "#f8df70",
  "#dfc243",
  "#f8df72",
  "#ffd111",
  "#ddc871",
  "#fffefa",
  "#867018",
  "#887322",
  "#fcd337",
  "#8e804b",
  "#fecc11",
  "#fccb16",
  "#ffc90c",
  "#b7ae8f",
  "#f8d86a",
  "#fbcd31",
  "#fcc307",
  "#e9ddb6",
  "#fcc515",
  "#f7e8aa",
  "#e8b004",
  "#f9c116",
  "#f9d770",
  "#fbc82f",
  "#f1f0ed",
  "#5b4913",
  "#f6c430",
  "#b78d12",
  "#f9bd10",
  "#f9d367",
  "#d9a40e",
  "#ebb10d",
  "#584717",
  "#f7de98",
  "#f9f1db",
  "#f4ce69",
  "#feba07",
  "#8a6913",
  "#876818",
  "#b6a476",
  "#fcb70a",
  "#f0d695",
  "#87723e",
  "#f8e8c1",
  "#d6a01d",
  "#f7da94",
  "#eaad1a",
  "#fbb612",
  "#b5aa90",
  "#f7f4ed",
  "#f8bc31",
  "#b78b26",
  "#e5d3aa",
  "#695e45",
  "#e5b751",
  "#f3bf4c",
  "#685e48",
  "#fbb929",
  "#f9d27d",
  "#e2c17c",
  "#b4a992",
  "#f6dead",
  "#f2e6ce",
  "#f8e0b0",
  "#393733",
  "#835e1d",
  "#f8f4ed",
  "#fca104",
  "#815f25",
  "#fca106",
  "#ffa60f",
  "#806332",
  "#fbf2e3",
  "#fba414",
  "#e4dfd7",
  "#826b48",
  "#dad4cb",
  "#bbb5ac",
  "#ff9900",
  "#fbb957",
  "#dc9123",
  "#c09351",
  "#f4a83a",
  "#f7c173",
  "#e7a23f",
  "#533c1b",
  "#f9e8d0",
  "#de9e44",
  "#f9cb8b",
  "#f9a633",
  "#daa45a",
  "#553b18",
  "#513c20",
  "#986524",
  "#97846c",
  "#e3bd8d",
  "#4d4030",
  "#fb8b05",
  "#f8c387",
  "#f28e16",
  "#503e2a",
  "#4a4035",
  "#cfccc9",
  "#c1b2a3",
  "#867e76",
  "#847c74",
  "#fc8c23",
  "#fbecde",
  "#4f4032",
  "#fbeee2",
  "#81776e",
  "#9a8878",
  "#5d3d21",
  "#66462a",
  "#918072",
  "#d99156",
  "#c1651a",
  "#d4c4b7",
  "#be7e4a",
  "#5c3719",
  "#de7622",
  "#db8540",
  "#80766e",
  "#f09c5a",
  "#f97d1c",
  "#f26b1f",
  "#f8b37f",
  "#fa7e23",
  "#f9e9cd",
  "#b7a091",
  "#945833",
  "#f0945d",
  "#964d22",
  "#954416",
  "#e16723",
  "#fc7930",
  "#cf7543",
  "#f86b1d",
  "#cd6227",
  "#f6dcce",
  "#d85916",
  "#f7cfba",
  "#f27635",
  "#e46828",
  "#fc6315",
  "#b7511d",
  "#ea8958",
  "#e8b49a",
  "#fb9968",
  "#edc3ae",
  "#363433",
  "#8b614d",
  "#aa6a4c",
  "#a6522c",
  "#fa5d19",
  "#71361d",
  "#b89485",
  "#f68c60",
  "#f6ad8f",
  "#732e12",
  "#f7cdbc",
  "#ef632b",
  "#8c4b31",
  "#64483d",
  "#f9723d",
  "#cf4813",
  "#ee8055",
  "#f8ebe6",
  "#753117",
  "#603d30",
  "#883a1e",
  "#b14b28",
  "#873d24",
  "#f6cec1",
  "#5b423a",
  "#624941",
  "#673424",
  "#f43e06",
  "#ef6f48",
  "#f4c7ba",
  "#ed5126",
  "#f34718",
  "#f2481b",
  "#652b1c",
  "#eea08c",
  "#f04b22",
  "#692a1b",
  "#f1441d",
  "#773d31",
  "#eeaa9c",
  "#f0ada0",
  "#863020",
  "#f2e7e5",
  "#862617",
  "#f5391c",
  "#f03f24",
  "#f33b1f",
  "#f23e23",
  "#f13c22",
  "#f05a46",
  "#f17666",
  "#f15642",
  "#f25a47",
  "#f2b9b2",
  "#592620",
  "#de2a18",
  "#ed3321",
  "#f04a3a",
  "#482522",
  "#5c1e19",
  "#d42517",
  "#f19790",
  "#ab372f",
  "#5a1f1b",
  "#ed3b2f",
  "#bdaead",
  "#eb261a",
  "#ac1f18",
  "#483332",
  "#481e1c",
  "#f1908c",
  "#ec2b24",
  "#efafad",
  "#f2cac9",
  "#4b2e2b",
  "#ed4845",
  "#ed3333",
  "#5d3131",
]);
const textColors = ref<string[]>([
  "#000000",
  "#1d1e2c",
  "#223662",
  "#2f3135",
  "#303033",
  "#83868b",
  "#c8ccd3",
  "#f2f4f8",
  "#303039",
  "#303030",
  "#333333",
  "#384a72",
  "#647291",
  "#666666",
  "#6b6b75",
  "#999999",
  "#9e9fa9",
  "#bdc3d0",
  "#cacaca",
  "#f3f4f6",
  "#f5f5f5",
  "#ffffff",
  "#eef0f4",
  "#dadce3",
  "#b0b2b9",
  "#595c64",
  "#f5f6f7",
  "#888888",
  "#262626",
]);
const fonts = [
  "12px",
  "14px",
  "16px",
  "18px",
  "20px",
  "22px",
  "24px",
  "26px",
  "28px",
  "30px",
];
const root = ref();
const activeColor = ref<string>("#ffffff");

const selectColor = (color: string): void => {
  activeColor.value = color;
};

useClickAway(root, () => {
  console.log("click outside!");
});

onMounted(() => {
  console.log(123);
  mainColors.value.sort();
  secondColors.value.sort();
  textColors.value.sort();
  console.log(mainColors);
});
</script>

<style lang="less" scoped>
.color-list {
  color: var(--font-color-std-1);
  height: calc(100vh - 50px);
  overflow: auto;
  padding-bottom: 50px;
  // background-color: var(--background-color-std-1);
  background-color: v-bind(activeColor);

  h1 {
    color: var(--font-color-1);
    text-align: center;
    padding-top: 20px;
  }

  h2 {
    padding-left: 20px;
    font-size: 15px;
    color: var(--font-color-1);
  }

  .color-container {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 20px;
    span {
      width: 56px;
      height: 56px;
      margin-right: 10px;
      margin-top: 10px;
      border-radius: 4px;
      font-size: 12px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .font-container {
    div {
      padding-left: 20px;
      margin-top: 15px;
    }
  }
}
</style>
